<script setup>
import { ref , getCurrentInstance} from 'vue'
const { emit } = getCurrentInstance();
const isContentVisible = ref(false)
function toggleContent (){
  isContentVisible.value = !isContentVisible.value
}
const  againstdy = ref(false)
const showstart = ref(true)
const showfinish = ref(false)
const showsave = ref(false)
const finishLearning = () => {
  const progress = 25;
  // 触发自定义事件，传递进度值给父组件
  showsave.value = false
  showfinish.value = false;
  againstdy.value = true;
  emit('finished-task', progress);
};


const startLearning = () => {
  showfinish.value = true
  showstart.value = false
  showsave.value =true
  emit('start-task')
}
</script>

<template>
<div class="taskList">
  <div class="title" @click="toggleContent">
    <div class="text">vue3开发初体验</div>
    <div class="bu-wr">
      <el-button v-show="againstdy" type="warning" style="margin-right: 30px;border-radius: 20px; height: 40px; width: 100px;">再次学习</el-button>
      <el-button v-show="showsave" type="warning" style="margin-right: 30px;border-radius: 20px; height: 40px; width: 100px;">保存</el-button>
      <el-button v-show="showstart" @click="startLearning" type="warning" style="margin-right: 30px;border-radius: 20px; height: 40px; width: 100px;">开始学习</el-button>
    <el-button v-show="showfinish"  @click="finishLearning" type="success" style="margin-right: 30px;border-radius: 20px; height: 40px; width: 100px;">完成学习</el-button>

    <div class="icon" :class="{ 'rotate-icon': isContentVisible }">
      {{ isContentVisible ? '↑' : '↓' }}
    </div>
  </div>
  </div>
  <div class="content" v-show="isContentVisible">这把的MVP应该给到格温，关键抢龙，以少打多。女枪的作用有没有格温身上的猫大都是问题，毕竟对面双狙一刺加不死阵和蝎子，很难起作用。
    大G和挖机这把是被康特了，可以看到前期挖机大G很多时候都没有拉开对位经济甚至是自己还劣势了，但是中后期的牵制作用是有的。两个害虫放走其中一个自家水晶都有炸的风险，只能分散战力来处理，而且很多时候吃掉对面几个大，间接给格温减轻负担。</div>
</div>

</template>

<style  scoped>
.bu-wr{
  display: flex;
  align-items: center;
  //margin-right: 0px;
}
.taskList{
  width: 90%;
  padding: 30px;
  /* 添加阴影效果 */
  box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.1); /* 你可以根据需要调整阴影的值 */
  /* 添加圆角效果 */
  border-radius: 10px; /* 你可以根据需要调整圆角的值 */
  margin: 10px auto;
  background-color: #fff;
  height: auto;
  border: 1px solid gainsboro;
}
.title{
  font-size: 1.5rem;
  height: 30px;
  display: flex;
  justify-content: space-between;
  line-height: 30px;
}

.content{
  margin-top: 20px;
  transition: max-height 0.5s ease-in-out; /* 添加过渡效果 */
}
.rotate-icon {
  /* 如果需要的话，你可以在这里添加旋转图标的样式 */
  transform: rotate(180deg);
}
</style>